<template>
    <div class="dynamic-detail"  :key="key">
        <div class="point">基本信息</div>
        <el-descriptions :column="1" border size="default" v-loading="loading">
            <el-descriptions-item
                v-for="(item, index) in baseConfig"
                :key="index + 'baseConfig'" 
                :label="item.name"
                label-class-name="base-content-label"
                class-name="base-content-content">
                <!-- 用户信息 -->
                <template v-if="item.field === 'nickname'">
                    <span class="one-line table-link" @click="openUserDetail(basicInfo.user_id)">{{ basicInfo[item.field] || '-' }}</span>
                </template>
                <!-- 图片信息 -->
                <template v-else-if="item.field === 'fileList'">
                    <template v-if="Array.isArray(basicInfo.fileList) && basicInfo.fileList.length">
                        <div 
                            v-for="(file, index) in fileList" 
                            :key="index" 
                            class="img-item">
                            <el-tooltip content="点击图片进行预览" placement="top">
                                <img
                                    :src="file.url" 
                                    width="100%"
                                    height="100%"
                                    @click="handlePreview(file.url, index)"
                                />
                            </el-tooltip>
                        </div>
                    </template>
                    <template v-else>-</template>
                </template>
                <template v-else>{{ basicInfo[item.field] || '-' }}</template>
            </el-descriptions-item>
        </el-descriptions>
        <div v-show="commentList.length">
            <div class="point" style="margin-top: 16px">评论信息</div>
            <el-table
                :data="commentList"
                v-loading="loading"
                highlight-current-row
                class="comment-table">
                <el-table-column label="评论内容" prop="content" min-width="100" show-overflow-tooltip fixed>
                    <template #default="{ row }">
                        <span class="one-line table-link" @click="openCommentDetail(row.comment_id)">{{ row.content || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="create_time" min-width="170" show-overflow-tooltip></el-table-column>
                <el-table-column label="回复评论" prop="parent_comment" min-width="120" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span v-if="row.parent_comment" class="one-line table-link" @click="openCommentDetail(row.parent_id)">{{ row.parent_comment|| '-' }}</span>
                        <template v-else>{{ row.parent_comment || '-' }}</template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-show="likeList.length">
            <div class="point" style="margin-top: 16px">点赞信息</div>
            <el-table
                :data="likeList"
                v-loading="loading"
                highlight-current-row
                class="comment-table">
                <el-table-column label="点赞用户" prop="nickname" min-width="100" show-overflow-tooltip fixed>
                    <template #default="{ row }">
                        <span class="one-line table-link" @click="openUserDetail(row.user_id)">{{ row.nickname || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="点赞时间" prop="triend_like_time" min-width="170" show-overflow-tooltip></el-table-column>
            </el-table>
        </div>
    </div>
    <!-- 图片预览 -->
    <el-dialog 
        v-if="dialogVisible"
        v-model="dialogVisible" 
        title="图片预览" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="400"
        class="log-dialog"
        @before-close="handleClose">
        <PreviewImage :fileList="fileList" :initialIndex="currentIndex"></PreviewImage>
    </el-dialog>
    <!-- 评论详情 -->
    <el-dialog
        v-if="dialogComment"
        v-model="dialogComment" 
        title="评论详情" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="log-dialog"
        @before-close="closeCommentDetail">
        <commentDetails :id="currentCommentId || ''"></commentDetails>
    </el-dialog>
    <!-- 用户详情 -->
    <el-dialog
        v-if="dialogUser"
        v-model="dialogUser" 
        title="用户详情" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="log-dialog"
        @before-close="closeUserDetail">
        <userDetails :id="currentUserId || ''"></userDetails>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'
import commentDetails from '../../activity-manage/components/commentDetails.vue'
import userDetails from '@/pages/user-manage/components/userDetails.vue'
import { getTriendById } from '../../../api/triend'
const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    },
    rowData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
let key = ref(0)
const forceUpdate = () => {
    //@ts-ignore
    key++
}
let basicInfo:any = ref({})
let loading = ref(false)
let dialogVisible = ref(false)
let currentIndex = ref(0)
let fileList:any = ref([])
let commentList = ref([{}])

let currentCommentId = ref('')
let dialogComment = ref(false)

let likeList = ref([{}])

let currentUserId = ref('')
let dialogUser = ref(false)

let baseConfig = reactive([
    { name: '动态内容', field: 'content' },
    { name: '发布人', field: 'nickname' },
    { name: '点赞数量', field: 'triend_like_count' },
    { name: '评论数量', field: 'triend_comment_count' },
    { name: '发布时间', field: 'create_time' },
    // { name: '更新时间', field: 'updateTime' },
    { name: '图片', field: 'fileList' },
])

watch(() => props.rowData, (object: Object) => {
    basicInfo.value = object
}, {
    immediate: true,
    deep: true
})
//@ts-ignore
watch(() => props.id, async(val: [String, Number]) => {
    if (val) {
        // 获取数据
        // loading.value = true
        // api({
        //     id: val
        // }).then(res => {
        //     basicInfo = Object.assign({}, res.data)
        //     // 文件列表处理
        //     if (Array.isArray(basicInfo.fileList) && basicInfo.fileList.length) {
        //         basicInfo.fileList.map(item => {
        //             // 发包用
        //             let url = window.location.origin + '/' + item.filePath
        //             fileList.value.push({ url })
        //         })
        //     }
        // }).catch(() => {

        // }).finally(() => {
            // loading.value = false
        // })
        loading.value = true
        const result = await getTriendById({  
            triend_id:val
        })
        //@ts-ignore
        if(result.code ==1){
            if(result.data.comments){
                result.data.comments.forEach((item:any) => {
                    item.parent_comment = item.parent_comment.content
                })
                commentList.value = result.data.comments
                
            }
            if(result.data.likes){
                result.data.likes.forEach((item:any) => {
                    item.nickname = item.user_tab.nickname
                })
                likeList.value = result.data.likes
            }
            forceUpdate()
            loading.value = false
        }
       
       
    }
}, {
    immediate: true,
    deep: true
})

// 图片预览
const handlePreview = (file: Object, index: number) => {
    console.log('file: ', file);
    currentIndex.value = index
    dialogVisible.value = true
}
// 关闭预览
const handleClose = () => {
    dialogVisible.value = false
    currentIndex.value = 0
}

// 打开评论详情
const openCommentDetail = (id: number) => {
    //@ts-ignore
    currentCommentId.value = id
    dialogComment.value = true
}
// 关闭评论详情
const closeCommentDetail = () => {
    currentCommentId.value = ''
    dialogComment.value = false
}

// 打开用户详情
const openUserDetail = (id: Number) => {
    //@ts-ignore
    currentUserId.value = id
    dialogUser.value = true
}
// 关闭用户详情
const closeUserDetail = () => {
    currentUserId.value = ''
    dialogUser.value = false
}
</script>

<style lang="less" scoped>
// less中使用 ::v-deep 深度选择器更改element-ui组件的样式
// scss中vue3使用:deep(.class)  vue2使用/deep/ .class
::v-deep .base-content-label {
    width: 100px;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #63686F;
    background: #FAFAFA;
}
::v-deep .base-content-content {
    font-size: 12px !important;
    color: #63686F !important;
    min-width: 150px;
    word-break: break-all;
}
.dynamic-detail {
    padding: 0 16px;
    .comment-table {
        height: 150px;
    }
}
</style>